<template>
  <div style="margin: auto"><h1>供货商管理</h1></div>

  <el-table
      :data="cutObj.records"
      height="250"
      border
      style="width: 100%">
    <el-table-column
        prop="name"
        label="供货商名称"
        width="300">
    </el-table-column>

    <el-table-column
        prop="cadre"
        label="负责人"
        width="200">
    </el-table-column>
    <el-table-column
        prop="range"
        label="经营范围"
        width="300">
    </el-table-column>
    <el-table-column
        label="操作"
        width="300">
      <template #default="scope">
        <el-button type="primary" size="small" @click="findById(scope.row.id);this.findVisible=true">查看</el-button>
        <el-button type="primary" size="small" @click="findById(scope.row.id);this.updateVisible=true">修改信息</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-pagination
      v-model:currentpage="cutObj.current"
      v-model:page-size="cutObj.size"
      background
      layout="prev, pager, next,jumper"
      :total="cutObj.total"
      @current-change="findByItem">
  </el-pagination>

  <el-button type="primary" @click="this.addVisible=true" style="margin-top: 60px;margin-left: 50px;size: 20px" >添加供应商</el-button>
<div class="searchDiv">
  <el-row>
    <el-col :span="10">供应商名称<input type="text" v-model="findObj.name"></el-col>
  </el-row>
  <el-row>
    <el-col :span="10" style="margin-top: 20px">经营范围<input type="text" v-model="findObj.ranges"></el-col>
  </el-row>
  <el-row>
    <el-col :span="8" style="margin-top: 20px"><el-button type="primary" @click="findByItem(1)">搜索</el-button></el-col>
  </el-row>
</div>

  <el-dialog
      v-model= "findVisible"
      title=""
      width="40%"
      center>
    <h1 style="margin-left: 210px">供应商信息详情</h1>
    <div style="margin-left: 200px;margin-top: 50px">供应商名称:<span style="margin-left: 50px">{{supplier.name}}</span><br></div>
    <div style="margin-left: 200px;margin-top: 50px">负责人:<span style="margin-left: 50px">{{supplier.cadre}}</span><br></div>
    <div style="margin-left: 200px;margin-top: 50px">负责人电话:<span style="margin-left: 50px">{{supplier.phone}}</span><br></div>
    <div style="margin-left: 200px;margin-top: 50px">供应商地址:<span style="margin-left: 50px">{{supplier.address}}</span><br></div>
    <div style="margin-left: 200px;margin-top: 50px">经营范围:<span style="margin-left: 50px">{{supplier.range}}</span><br></div>
    <el-button type="primary" @click="this.findVisible=false" style="margin-top: 30px;margin-left: 50px;size: 20px" >确定</el-button>
  </el-dialog>
  <el-dialog
      v-model= "updateVisible"
      title=""
      width="60%"
      center>
    <h1 style="margin-left: 210px">修改供应商信息</h1>
    <div style="margin-left: 200px;margin-top: 50px">供应商名称:<span style="margin-left: 50px">{{supplier.name}}</span><br></div>
    <div style="margin-left: 200px;margin-top: 50px">负责人:<input type="text" v-model="supplier.cadre"><br></div>
    <div style="margin-left: 200px;margin-top: 50px">负责人电话:<input type="text" v-model="supplier.phone"><br></div>
    <div style="margin-left: 200px;margin-top: 50px">供应商地址:<span style="margin-left: 50px">{{supplier.address}}</span><br></div>
    <div style="margin-left: 200px;margin-top: 50px">经营范围:<span style="margin-left: 50px">{{supplier.range}}</span><br></div>
    <el-button type="primary" @click="update" style="margin-top: 30px;margin-left: 50px;size: 20px" >修改</el-button>
  </el-dialog>
  <el-dialog
      v-model= "addVisible"
      title=""
      width="60%"
      center>
    <h1 style="margin-left: 210px">添加供应商信息</h1>
    <div style="margin-left: 200px;margin-top: 50px">供应商名称:<input type="text" v-model="addSupplier.name"><br></div>
    <div style="margin-left: 200px;margin-top: 50px">负责人:<input type="text" v-model="addSupplier.cadre"><br></div>
    <div style="margin-left: 200px;margin-top: 50px">负责人电话:<input type="text" v-model="addSupplier.phone"><br></div>
    <div style="margin-left: 200px;margin-top: 50px">供应商地址:<input type="text" v-model="addSupplier.address"><br></div>
    <div style="margin-left: 200px;margin-top: 50px">经营范围:<input type="text" v-model="addSupplier.ranges"></div>

<!--    <form action="/project/supplier/addFile" method="post" enctype="multipart/form-data">-->
      请选择文件批量添加：<input type="file" ref="excelFile"><br>
      <input type="button" value="添加"  @click="addList">
<!--    </form>-->

    <el-button type="primary" @click="add" style="margin-top: 30px;margin-left: 100px;size: 20px" >添加</el-button>
  </el-dialog>
  <el-dialog
      v-model= "addDiv"
      title=""
      width="20%"
      center>
    <h3>添加成功</h3>
    <el-button type="primary" @click="this.addDiv=false;this.addVisible=false;" style="margin-top: 30px;margin-left: 100px;size: 20px" >确定</el-button>
  </el-dialog>
</template>

<script>
import axios from "axios";
export default {
data(){
     return{
     cutObj:{},
     findObj:{},
       findVisible:false,
       updateVisible:false,
       addVisible:false,
       supplier:{},
       addSupplier:{},
       addDiv:false,
     }
},
  methods:{
    findByItem(pageNo){
         this.findObj.pageNo = pageNo;
      axios.get("/project/supplier/findByItem",{params:this.findObj}).then(resp=>{
        this.cutObj = resp.data;
      })
    },
    findById(id){
      axios.get("/project/supplier/findById",{params:{id}}).then(resp=>{
        this.supplier=resp.data;
      })
    },
    update() {
      axios.get("/project/supplier/update", {params: this.supplier}).then(resp=>{
        if (resp.data=="ok"){
          this.updateVisible = false;
          this.findByItem(1);
        }
      })
      this.updateVisible = false;
    },
    add(){
      axios.get("/project/supplier/add",{params:this.addSupplier}).then(resp=>{
        if (resp.data=="ok"){

          this.addDiv=true;
          this.addSupplier="";
        }
      })
    },
    async addList(){
      var fromObj = new FormData();
      fromObj.append("excelFile",this.$refs.excelFile.files[0]);
      let config = {
        headers:{'Content-Type':'multipart/form-data'}
      }
      await axios.post("/project/supplier/addFile",fromObj,config).then(resp =>{

        if (resp.data == 'ok'){
          this.findByItem(1);
          this.addDiv=true;
        }
      })
    }
  },
  created() {
  this.findByItem(1)
  }
}
</script>

<style scoped>
.searchDiv{
  display: flex;
  flex-wrap: wrap;
  width: 200px;
  margin-left: 700px;

}

</style>